<template>
  <div>
    <a-drawer
      :title="title"
      :placement="placement"
      :closable="true"
      @close="onClose"
      :width="width"
      :visible="visible"
      :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
    >
      <slot name="content"></slot>
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
        }"
      >
        <!-- <a-button :style="{marginRight: '8px'}" @click="onClose">Cancel</a-button>
        <a-button @click="onClose" type="primary">Submit</a-button>-->
        <slot name="action"></slot>
      </div>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
@Component({
  name: "ant-drawer",
  layout: "menu"
})
export default class AnthorityOpenDrawer extends Vue {
  @Prop({ type: String, required: true }) title!: string;
  @Prop({ type: Boolean, required: true }) visible!: boolean;
  @Prop({ type: Number, default: 600 }) width!: number;
  @Prop({ type: String, default: "right" }) placement!: string;
  @Emit("onClose")
  onClose() {}
}
</script>
